<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>裂变营销</title>
</head>
<style>
    .form-horizontal .form-group.wu-margin {
        margin-left: 0;
        margin-right: 0;
    }

    .wu-pos-b {
        box-sizing: border-box;
        width: 365px;
        left: auto;
        right: 0;
    }

    .calcH59 {
        /*Standard */
        height: calc(100% - 59px);
        /*Firefox*/
        height: -moz-calc(100% - 59px);
        /*chrome safari*/
        height: -webkit-calc(100% - 59px);

    }

    .calcH32 {
        /*Standard */
        height: calc(100% - 32px);
        /*Firefox*/
        height: -moz-calc(100% - 32px);
        /*chrome safari*/
        height: -webkit-calc(100% - 32px);

    }
    .wu-cash{
        height: 110px;
        margin: 10px;
        background: #f97c33;
        /* border: 1px solid #969594; */
        border-radius: 5px;
        box-shadow: 1px 1px 5px #999;
        -webkit-box-shadow: 1px 1px 5px #999;
        -moz-box-shadow: 1px 1px 5px #999;
    }
    .wu-cash>div{
        float: left;
        height: 100%;
        width: 35%;
        position: relative;
    }
    .wu-cash>div.cashDetail{
        width: 60%;
        margin-left: 3%;
    }
    .wu-cash p{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    .wu-size{
        font-size: 4rem;
    }
    .cashUl{
        padding-top: 10px;
    }
    .cashUl>li{
        margin-bottom: 3px;
    }
    .cashUl>li.cashTitle{
        font-size: 1.8rem;
        font-weight: 600;
        font-weight: bold;
    }
    .calcH32 .row{
         margin-right: 0;
         margin-left: 0;
    }
</style>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
    <span class="c-gray en">&gt;</span>
    裂变营销
    <span class="c-gray en">&gt;</span>
    营销配置
</nav>
<div class="page-container calcH59">
    <div id="tab_marketing" class="HuiTab" style="height: 100%;">
        <div class="tabBar clearfix">
            <span>消费有礼配置</span>
            <span>储值返利配置</span>
        </div>
<!--****************消费有礼基本配置***************-->
        <div class="tabCon">
            <form class="form-horizontal" method="post" id="consume-form">
                <div class="box-body">
                    <div class="form-unit">消费有礼基本配置（测试）</div>
                    <div class="row">
                        <input id="consume-ruleType" value="1" style="display: none;"/>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>规则名称：</label>
                            <div class="  col-sm-4">
                                <input type="text" class="form-control" value="" placeholder="" id="consume-ruleName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>规则标题：</label>
                            <div class="  col-sm-4">
                                <input type="text" class="form-control" value="" placeholder="" id="consume-ruleTitle">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3">规则内容：</label>
                            <div class="formControls  col-sm-4">
                                <textarea id="consume-ruleContent" cols="80" rows="3" class="textarea valid"
                                          placeholder="请输入使用规则..."></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>红包面额：</label>
                            <div class="  col-sm-4">
                                <div class="form-inline">
                                    <div class="form-group wu-margin">
                                        <label>满</label>
                                        <input class="form-control" placeholder="元" style="width: 60px"
                                               id="consume-minPayAmount">
                                    </div>
                                    <div class="form-group wu-margin">
                                        <label>减</label>
                                        <input class="form-control" placeholder="元" style="width: 60px"
                                               id="consume-deductAmount">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>领取时间：</label>
                            <div class="  col-sm-4">
                                <div class="form-inline">
                                    <div class="form-group wu-margin">
                                        <label>从</label>
                                        <input type="text" class="form-control input-text Wdate"
                                               onfocus="WdatePicker({readOnly:true})" id="consume-startTime">
                                    </div>
                                    <div class="form-group wu-margin">
                                        <label>至</label>
                                        <input type="text" class="form-control input-text Wdate"
                                               onfocus="WdatePicker({readOnly:true})" id="consume-endTime">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>使用期限：</label>
                            <div class="  col-sm-4 form-inline">
                                <input type="text" class="form-control" value="" placeholder="" id="consume-validDays">&nbsp;&nbsp;天
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>投放总量：</label>
                            <div class="  col-sm-4 form-inline">
                                <input type="text" class="form-control" value="" placeholder="1000"
                                       id="consume-sendAmount">&nbsp;&nbsp;个
                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" control-label  col-sm-3">红包领用说明：</label>
                            <div class="  col-sm-4">
                                <p>1.必须是新会员注册才可以领取。</p>
                                <p>2.必须是手机绑定账户才可以领取。</p>
                                <p>3.同一个用户在同一个模板下红包最多可获取20个。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <div class="row">
                        <div class="col-sm-offset-6 col-sm-6">
                            <button class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-ok"></i> 保 存</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
<!--****************储值返利基本配置***************-->
        <div class="tabCon">
            <form class="form-horizontal" method="post" id="rebate-form">
                <div class="box-body">
                    <div class="form-unit">储值返利基本配置（测试）</div>
                    <div class="row">
                        <input id="rebate-ruleType" value="1" style="display: none;"/>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>规则名称：</label>
                            <div class="  col-sm-4">
                                <input type="text" class="form-control" value="" placeholder="" id="rebate-ruleName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>规则标题：</label>
                            <div class="  col-sm-4">
                                <input type="text" class="form-control" value="" placeholder="" id="rebate-ruleTitle">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3">规则内容：</label>
                            <div class="formControls  col-sm-4">
                                <textarea id="rebate-ruleContent" cols="80" rows="3" class="textarea valid"
                                          placeholder="请输入使用规则..."></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>红包面额：</label>
                            <div class="  col-sm-4">
                                <div class="form-inline">
                                    <div class="form-group wu-margin">
                                        <label>满</label>
                                        <input class="form-control" placeholder="元" style="width: 60px"
                                               id="rebate-minPayAmount">
                                    </div>
                                    <div class="form-group wu-margin">
                                        <label>减</label>
                                        <input class="form-control" placeholder="元" style="width: 60px"
                                               id="rebate-deductAmount">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>领取时间：</label>
                            <div class="  col-sm-4">
                                <div class="form-inline">
                                    <div class="form-group wu-margin">
                                        <label>从</label>
                                        <input type="text" class="form-control input-text Wdate"
                                               onfocus="WdatePicker({readOnly:true})" id="rebate-startTime">
                                    </div>
                                    <div class="form-group wu-margin">
                                        <label>至</label>
                                        <input type="text" class="form-control input-text Wdate"
                                               onfocus="WdatePicker({readOnly:true})" id="rebate-endTime">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>使用期限：</label>
                            <div class="  col-sm-4 form-inline">
                                <input type="text" class="form-control" value="" placeholder="" id="rebate-validDays">&nbsp;&nbsp;天
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-sm-3"><span class="c-red"></span>投放总量：</label>
                            <div class="  col-sm-4 form-inline">
                                <input type="text" class="form-control" value="" placeholder="1000"
                                       id="rebate-sendAmount">&nbsp;&nbsp;个
                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" control-label  col-sm-3">红包领用说明：</label>
                            <div class="  col-sm-4">
                                <p>1.必须是新会员注册才可以领取。</p>
                                <p>2.必须是手机绑定账户才可以领取。</p>
                                <p>3.同一个用户在同一个模板下红包最多可获取20个。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <div class="row">
                        <div class="col-sm-offset-6 col-sm-6">
                            <button class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-ok"></i> 保 存</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    /*裂变营销配置 merchantMarketingMarketingFun*/
    var merchantMarketingMarketingFun;

    merchantMarketingMarketingFun = {
        init: function () {
            let self = this;
            $("#tab_marketing").Huitab({
                index: 0
            });

            //self.bindEvent();
            //self.loadRegisterPackage();
        },
        bindEvent : function () {
            let self = this;
           $("#RegisterAddBtn").on("click",function () {
               let cashList = $("#RegisterTable").bootstrapTable('getAllSelections');
               $('#cashListShow').html(self.renderTemp('cashTemplate',cashList));
           })
        },
        renderTemp:function (tempId,data) {
            /*data为数组格式*/
            let dataObj = {modelList : data};
            return template(tempId,dataObj)
        },
        //重新加载bootstrapTable的公共方法
        reloadBootstrapTable : function (url,tableId) {
            $.ajax({
                type: "get",
                url: "/back"+url,
                dataType: "json",
                success: function (json) {
                    $("#"+tableId).bootstrapTable('load', json);
                }
            })
        }


    };
    merchantMarketingMarketingFun.init();
</script>
</body>
</html>